<!DOCTYPE html>

<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<meta http-equiv="Pragma" content="no-cache">
		<meta http-equiv="Expires" content="-1">

		<title>jQuery Stepy - A Wizard Plugin</title>

		<!-- This CSS does not belong to the plugin. -->
		<link type="text/css" rel="stylesheet" href="doc/css/stylesheet.css"/>

		<link type="text/css" rel="stylesheet" href="css/jquery.stepy.css" />

		<script type="text/javascript" src="js/jquery.min.js"></script>

		<!-- Optionaly -->
		<script type="text/javascript" src="js/jquery.validate.min.js"></script>

		<script type="text/javascript" src="js/jquery.stepy.min.js"></script>

		<script type="text/javascript">
			// This code does NOT belong the plugin. See the example code at the bottom of this page.
			var _gaq = _gaq || [];
			_gaq.push(['_setAccount', 'UA-194992347-4']);
			_gaq.push(['_trackPageview']);
			
			(function() {
				var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
				ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
				var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
			})();
		</script>
	</head>
	<body>
		<div id="header">
			<div id="title">
				<a href="http://wbotelhos.com/stepy">jQuery Stepy - A Wizard Plugin</a>
				<span>(current version: 1.1.0)</span>
			</div>

			<div id="menu">
				<a href="http://github.com/downloads/wbotelhos/stepy/jquery.stepy-1.1.0.zip" target="_blank">Download</a> |
				<a href="http://github.com/wbotelhos/stepy" target="_blank">Github</a> |
				<a href="http://www.wbotelhos.com/stepy/changelog.markdown" target="_blank">Change Log</a> |
				<a href="http://www.wbotelhos.com/stepy/README.markdown" target="_blank">Readme</a> |
				<a href="http://www.wbotelhos.com/2011/03/14/jquery-stepy-a-wizard-plugin" target="_blank">Article</a> |
				<a href="http://www.opensource.org/licenses/mit-license.php" target="_blank">License</a> |
				<a href="http://www.wbotelhos.com/stepy/who.html" target="_blank">Who is using</a> |
				<a href="http://www.wbotelhos.com/2011/03/14/jquery-stepy-a-wizard-plugin#comments" target="_blank" style="color: #2C8CBD;">Doubt</a> |
				<a href="http://www.wbotelhos.com/labs" target="_blank" style="color: #000;">yLab</a>
			</div>

			<a id="coffee" href="https://www.paypal.com/cgi-bin/webscr?cmd=_donations&amp;business=X8HEP2878NDEG&amp;item_name=jQuery%20Stepy" target="_blank">buy me a coffee</a>

			<div class="description">jQuery <strong>Stepy</strong> is a plugin based on FormToWizard that generates a customizable wizard.</div>
		</div>

		<div id="content">
			<div id="checkbox-default-demo" class="session-first">With default options using checkbox:</div>
	
			<form id="default">
				<fieldset title="Step 1">
					<legend>description one</legend>
					<label>User:</label> <input type="text" value="wbotelhos" size="40" disabled="disabled" /> <!-- Disabled fields are not focused.  -->
					<label>E-mail:</label> <input type="text" size="40" />
					<label>Password:</label> <input type="password" size="40" />
				</fieldset>
	
				<fieldset title="Step 2">
					<legend>description two</legend>
					<label>Nick Name:</label> <input type="text"size="30" />
					<label>Bio:</label> <textarea rows="5" cols="60"></textarea>
				</fieldset>
	
				<input type="submit" class="finish" value="Finish!" />
			</form>

			<div class="source">
				$('#step').stepy();
			</div>

			<div id="custom-demo" class="session">A custom form in a validation style:</div>		

			<form id="custom">
				<fieldset title="Thread 1">
					<legend>description one</legend>

					<label>User:</label>
					<!-- Hidden fields are not focused.  -->
					<input type="hidden" name="hidden" />

					<!-- Disabled fields are not validated.  -->
					<input type="text" value="wbotelhos" size="40" name="user" disabled="disabled" />

					<label>E-mail:</label>
					<input type="text" size="40" name="email" />
					<input type="checkbox" name="checked" /> Checked?

					<label>Newsletter?</label>
					<input type="radio" name="newsletter" /> Yep
					<input type="radio" name="newsletter" /> Nop

					<label>Password:</label>
					<input type="password" name="password" size="40" />
				</fieldset>

				<fieldset title="Thread 2">
					<legend>description two</legend>

					<label>Nick Name:</label>
					<input type="text" size="30" />

					<label>Bio:</label>
					<textarea name="bio" rows="5" cols="60"></textarea>
				</fieldset>
	
				<fieldset title="Thread 3">
					<legend>description three</legend>

					<label>Birthday:</label>
					<select name="day">
						<option></option>
						<option>23</option>
					</select>

					<select>
						<option>10</option>
					</select>

					<select>
						<option>1984</option>
					</select>

					<label>Site:</label>
					<input type="text" name="site" size="40" />
				</fieldset>
	
				<input type="submit" class="finish" value="Finish!" />
			</form><br/>

			<div class="source">
				$('#step').stepy({<br/>
					&nbsp;&nbsp;backLabel:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;'Backward',<br/>
					&nbsp;&nbsp;block:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;true,<br/>
					&nbsp;&nbsp;errorImage:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;true,<br/>
					&nbsp;&nbsp;nextLabel:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;'Forward',<br/>
					&nbsp;&nbsp;titleClick:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;true,<br/>
					&nbsp;&nbsp;validate:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;true<br/>
				});
			</div><br/>

			<span class="comment">
				 - When the attribute 'validate' is true, you must include the jquery.validate.js.
			</span><br/>

			<div id="step-demo" class="session">With just step without form:</div>		

			<div id="step">
				<fieldset title="Image 1">
					<legend>description one</legend><br/>
					<center><img src="doc/img/image-1.png" alt="" /></center>
				</fieldset>
	
				<fieldset title="Image 2">
					<legend>description two</legend><br/>
					<center><img src="doc/img/image-2.png" alt="" /></center>
				</fieldset>
	
				<fieldset title="Image 3">
					<legend>description three</legend><br/>
					<center><img src="doc/img/image-3.png" alt="" /></center>
				</fieldset>
			</div>
	
			<div class="source">
				$('div#step').stepy({<br/>
				&nbsp;&nbsp;finishButton: false<br/>
				});
			</div>

			<div id="callback-demo" class="session">With transitions callback:</div>		
	
			<form id="callback">
				<fieldset title="Step 1">
					<legend>description one</legend>
					<label>Name:</label>
					<input type="text" size="40" />

					<label>E-mail:</label>
					<input type="text" size="40" />
				</fieldset>

				<fieldset title="Step 2">
					<legend>description two</legend>
					<label>User:</label>
					<input type="text"size="40" />

					<label>Password:</label>
					<input type="password" size="40" />
				</fieldset>
	
				<fieldset title="Step 3">
					<legend>description three</legend>

					<label>Nick Name:</label>
					<input type="text" size="40" />

					<label>Age:</label>
					<input type="text" size="40" />
				</fieldset>

				<fieldset title="Step 4">
					<legend>description four</legend>
					<label>Bio:</label>
					<input type="text"size="40" />

					<label>Detail:</label>
					<input type="password" size="40" />
				</fieldset>

				<input type="submit" class="finish" value="Finish!" />
			</form>
	
			<div class="source">
				$('#step').stepy({<br/>
				&nbsp;&nbsp;back: function(index) {<br/>
				&nbsp;&nbsp;&nbsp;&nbsp;alert('Going to step ' + index + '...');<br/>
				&nbsp;&nbsp;}, next: function(index) {<br/>
				&nbsp;&nbsp;&nbsp;&nbsp;if (!isValid()) {<br/>
				&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;alert('Invalid random value!');<br/>
				&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return false;<br/>
				&nbsp;&nbsp;&nbsp;&nbsp;}<br/><br/>
	
				&nbsp;&nbsp;&nbsp;&nbsp;alert('Going to step ' + index + '...');<br/>
				&nbsp;&nbsp;}, select: function(index) {<br/>
				&nbsp;&nbsp;&nbsp;&nbsp;alert('Current step ' + index + '.');<br/>
				&nbsp;&nbsp;}, finish: function(index) {<br/>
				&nbsp;&nbsp;&nbsp;&nbsp;alert('Finishing on step ' + index + '...');<br/>
				&nbsp;&nbsp;},<br/>
				&nbsp;&nbsp;titleClick: true<br/>
				});
			</div><br/>
	
			<span class="comment">
				 - You can do validations during the callback;<br/>
				 - Return "false" to prevent the transition;<br/>
				 - Return "true" or nothing to continue the transition;<br/>
				 - If the Stepy is a form and the finish element is not a submit type, then .submit() will be invoked.
			</span><br/>

			<div id="target-demo" class="session">With target for the titles and custom legend and description:</div>		

			<form id="target">
				<fieldset title="1">
					<legend>--</legend>
					<center><img src="doc/img/image-3.png" alt="" /></center>
				</fieldset>

				<fieldset title="2">
					<legend>--</legend>
					<center><img src="doc/img/image-1.png" alt="" /></center>
				</fieldset>

				<fieldset title="3">
					<legend>--</legend>
					<center><img src="doc/img/image-2.png" alt="" /></center>
				</fieldset>

				<input type="submit" class="finish" value="Finish!" />
			</form>

			<div id="title-target"></div>

			<div class="source">
				&lt;div id="title-target"&gt;&lt;/div&gt;<br/><br/>

				$('#step').stepy({<br/>
				&nbsp;&nbsp;description:&nbsp;&nbsp;false,<br/>
				&nbsp;&nbsp;legend:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;false,<br/>
				&nbsp;&nbsp;titleClick:&nbsp;&nbsp;&nbsp;true,<br/>
				&nbsp;&nbsp;titleTarget:&nbsp;&nbsp;'#title-target'<br/>
				});<br/>
			</div><br/>
	
			<span class="comment">
				 - You can choose any specific target;<br/>
				 - Even if the fieldset has legend, it will not appear if legend attribute is false;<br/>
				 - The description depends of the legend element. Even with legend attribute setted to false;<br/>
				 - The finish button can be any element you want, since it has the class name 'finish'.
			</span><br/>

			<div class="session">HTML structure:</div>

			<div class="source">
				&lt;form id="step"&gt;<br/>
				&nbsp;&nbsp;&lt;fieldset title="Title"&gt;<br/>
				&nbsp;&nbsp;&nbsp;&nbsp;&lt;legend&gt;description&lt;/legend&gt;<br/>
				&nbsp;&nbsp;&nbsp;&nbsp;<span class="comment-html">&lt;!-- input fields --&gt;</span><br/>
				&nbsp;&nbsp;&lt;/fieldset&gt;<br/><br/>
	
				&nbsp;&nbsp;&lt;fieldset title="Title"&gt;<br/>
				&nbsp;&nbsp;&nbsp;&nbsp;&lt;legend&gt;description&lt;/legend&gt;<br/>
				&nbsp;&nbsp;&nbsp;&nbsp;<span class="comment-html">&lt;!-- input fields --&gt;</span><br/>
				&nbsp;&nbsp;&lt;/fieldset&gt;<br/><br/>
	
				&nbsp;&nbsp;&lt;input type="submit" class="finish"/&gt;<br/>
				&lt;/form&gt;
			</div>
	
			<span class="comment">
				- The fieldset's title is the main title of the step and the legend is the description of it.
			</span>
	
			<div class="session">Default options:</div>
	
			<div class="source">
				back:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;undefined<br/>
				<div class="comment">Callback before the backward action.</div>

				backLabel:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;'&lt; Back'<br/>
				<div class="comment">Change the back button label.</div>

				block:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;false<br/>
				<div class="comment">* Block the next step if the current is invalid.</div>

				description:&nbsp;&nbsp;&nbsp;&nbsp;false<br/>
				<div class="comment">Choose if the descriptions of the titles will be showed.</div>

				errorImage:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;false<br/>
				<div class="comment">* If an error occurs, a image is showed in the title of the corresponding step.</div>

				finish:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;undefined<br/>
				<div class="comment">Callback before the finish action.</div>

				finishButton:&nbsp;&nbsp;&nbsp;true<br/>
				<div class="comment">Include the element with class name '.finish' into the last step.</div>

				ignore:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;''<br/>
				<div class="comment">Choose the fields to be ignored on validation.</div>

				legend:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;false<br/>
				<div class="comment">Choose if the legends of the steps will be showed.</div>

				nextLabel:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;'Next &gt;'
				<div class="comment">Change the next button label.</div>

				next:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;undefined<br/>
				<div class="comment">Callback before the forward action.</div>

				titleClick:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;true<br/>
				<div class="comment">Active the back and next action in the titles.</div>

				titleTarget:&nbsp;&nbsp;&nbsp;&nbsp;''<br/>
				<div class="comment">Choose the place where titles will be placed.</div>

				select:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;undefined<br/>
				<div class="comment">Callback executed when the step is shown.</div>

			 	validate:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;false<br/>
				<div class="comment">* Active the jQuery Validation for each step.</div>
			</div>
	
			<div class="description-code">*  Depends of <a href="http://bassistance.de/jquery-plugins/jquery-plugin-validation/" target="_blank">jquery.validation.js</a>.</div>

			<div class="session">Public functions:</div>
	
			<div class="source">$('#step').stepy('step', 2);</div>
			<div class="description-code">Change the form to step 2.</div>
		</div>

		<div id="footer">
			<div id="copy">&copy; 2010 <a href="http://www.wbotelhos.com/" target="_blank">wbotelhos.com</a></div>
		</div>

		<script type="text/javascript">
			$(function() {

				$('#default').stepy();

				$('#custom').stepy({
					backLabel:	'Backward',
					block:		true,
					errorImage:	true,
					nextLabel:	'Forward',
					titleClick:	true,
					validate:	true
				});

				$('div#step').stepy({
					finishButton: false
				});

				// Optionaly
				$('#custom').validate({
					errorPlacement: function(error, element) {
						$('#custom div.stepy-error').append(error);
					}, rules: {
						'user':			{ maxlength: 1 },
						'email':		'email',
						'checked':		'required',
						'newsletter':	'required',
						'password':		'required',
						'bio':			'required',
						'day':			'required'
					}, messages: {
						'user':			{ maxlength: 'User field should be less than 1!' },
						'email':		{ email: 	 'Invalid e-mail!' },
						'checked':		{ required:  'Checked field is required!' },
						'newsletter':	{ required:  'Newsletter field is required!' },
						'password':		{ required:  'Password field is requerid!' },
						'bio':			{ required:  'Bio field is required!' },
						'day':			{ required:  'Day field is requerid!' }
					}
				});

				$('#callback').stepy({
					back: function(index) {
						alert('Going to step ' + index + '...');
					}, next: function(index) {
						if ((Math.random() * 10) < 5) {
							alert('Invalid random value!');
							return false;
						}

						alert('Going to step ' + index + '...');
					}, select: function(index) {
						alert('Current step ' + index + '.');
					}, finish: function(index) {
						alert('Finishing on step ' + index + '...');
					}, titleClick: true
				});

				$('#target').stepy({
					description:	false,
					legend:			false,
					titleClick:		true,
					titleTarget:	'#title-target'
				});

			});
		</script>
	</body>
</html>